<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		th{
			width: 130px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			background: skyblue;
			color: white;
		}
        .box{
        	width: 50px;
        }
        td{
			width: 130px;
			height: 30px;
			text-align: center;
			line-height: 30px;
			background: white;
		}
	</style>
</head>
<body>
	<table>
		<tr>
			<th class="box">
				<input type="checkbox" class="btn">
			</th>
			<th>菜名</th>
			<th>报价</th>
		</tr>
		<tr>
			<td class="box"><input type="checkbox" class="btn"></td>
			<td>红烧肉</td>
			<td>30</td>
		</tr>
		<tr>
			<td class="box"><input type="checkbox" class="btn"></td>
			<td>红烧肉</td>
			<td>30</td>
		</tr>
		<tr>
			<td class="box"><input type="checkbox" class="btn"></td>
			<td>红烧肉</td>
			<td>30</td>
		</tr>
		<tr>
			<td class="box"><input type="checkbox" class="btn"></td>
			<td>红烧肉</td>
			<td>30</td>
		</tr>
		 <script src="../jquery-3.2.1.js"></script>
		 <script>
		 	// 全选功能
		 	$("th .btn").click(function() {
                $("td .btn").prop('checked', $(this).prop('checked'));
            });

            // 子复选框点击更新全选状态
            $("td .btn").click(function() {
            	if($("td .btn").length == $("td .btn:checked").length){
            		$('th .btn').prop("checked",true)
            	}else{
            		$('th .btn').prop("checked",false)
            	}
            });
		 </script>
	</table>
</body>
</html>